<template>
	<view class="nav">
		<view :style="'height:'+statusHeightRef+'rpx;'+backgroundStypeRef"></view>
		<!-- 如果是首页显示图标文本搜索框 -->
		<view v-if="isHome" class="headNav"
			:style="'height:'+navbarHeightRef+'rpx;line-height:'+navbarHeightRef+'rpx;padding-left:20rpx;' + backgroundStypeRef">
			<text class="city" @click="gotoAreaPage">{{areaRef}}</text>

			// #ifdef MP-WEIXIN
			<view style="flex:1" @click="gotoSearchPage">
				<view :style="
				'height:'+menu.height*2+'rpx;'+
				'line-height:'+menu.height*2+'rpx;'+
				'margin-top:'+(menu.top*2-statusHeightRef)+'rpx;'+
				'margin-left: 32rpx;'+
				'margin-right:'+(menu.width*2+24)+'rpx;'+
				'background: #f4f4f4;border-radius:200rpx;text-align:center;'
				">
					<text class="search-text">找医院</text>
				</view>
			</view>
			// #endif

			// #ifdef H5
			<view style="flex:1;" @click="gotoSearchPage">
				<view :style="
				'height:'+(navbarHeightRef-10)+'rpx;'+
				'line-height:'+(navbarHeightRef-10)+'rpx;'+
				'margin: 5rpx 32rpx;'+
				'box-sizing: border-box; '+
				'background: #f4f4f4;border-radius:200rpx;text-align:center;'
				">
					<text class="search-text">找医院</text>
				</view>
			</view>
			// #endif

		</view>
		<!-- 如果是非首页显示返回和标题 -->
		<view v-else class="navbar" :style="'height:'+navbarHeightRef+'rpx;'+backgroundStypeRef">
			<view class="back-icon" @click="backOrHome">
				<image v-if="currentPagesRef > 1" src="/static/navbar/ic_back.png"></image>
				<image v-else src="/static/navbar/ic_home.png"></image>
			</view>
			<view class="nav-title" v-if="titleText">
				<view :style="'height:'+navbarHeightRef+'rpx;line-height:'+navbarHeightRef+'rpx;' + textStypeRef">
					{{titleText}}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onBeforeMount,
		onMounted,
		defineProps,
		defineEmits,
		reactive
	} from 'vue';
	import {
		onShow
	} from '@dcloudio/uni-app';
	// 接收参数
	const props = defineProps({
		background: {
			type: String,
			default: 'rgba(255,255,255,1)'
		},
		color: {
			type: String,
			default: 'rgba(0,0,0,1)'
		},
		fontSize: {
			type: String,
			default: 32
		},
		iconWidth: {
			type: String,
			default: 116
		},
		iconHeight: {
			type: String,
			default: 38
		},
		titleText: {
			type: String,
			default: ''
		},
		isHome: {
			type: Boolean,
			default: false
		}
	})
	const areaRef = ref('选择区域');
	// 1. 声明事件（必须与父组件监听的名称一致）
	const emit = defineEmits(['getNavBarHeight']);
	// 状态栏高度
	const statusHeightRef = ref(0);
	// navbar高度
	const navbarHeightRef = ref(0);
	// 背景颜色
	const backgroundStypeRef = ref('');
	// 字体颜色
	const textStypeRef = ref('');
	// 图标样式
	const iconStypeRef = ref('');
	// 当前页面栈
	const currentPagesRef = ref(getCurrentPages().length);
	// 获取胶囊
	// const menu = reactive(uni.getMenuButtonBoundingClientRect());

	// #ifdef MP-WEIXIN
	// 获取胶囊
	const menu = reactive(uni.getMenuButtonBoundingClientRect());
	// #endif

	// 挂载前
	onBeforeMount(() => {
		setNavHeight();
		setStyle();
	})
	onMounted(() => {
		// 关键：通过事件将高度传递给父组件
		emit('getNavBarHeight', (statusHeightRef.value + navbarHeightRef.value)); // 关键：触发事件
	})
	onShow(() => {
		const area = uni.getStorageSync('storage_area');
		if (area) {
			areaRef.value = area.show;
		}
	})

	// 计算状态栏高度
	const setNavHeight = () => {
		// 1. 获取系统信息（含状态栏高度）
		const {
			statusBarHeight,
			system
		} = uni.getSystemInfoSync();

		// #ifdef MP-WEIXIN
		// 2. 获取胶囊按钮位置（用于计算导航栏高度）
		const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
		// 3. 计算导航栏总高度（兼容 iOS 和 Android）
		const _navbarHeight = (menuButtonInfo.top - statusBarHeight) * 2 + menuButtonInfo.height;
		navbarHeightRef.value = _navbarHeight * 2;
		// 计算状态栏高度
		statusHeightRef.value = statusBarHeight * 2;
		// #endif

		// #ifdef H5
		navbarHeightRef.value = 80;
		statusHeightRef.value = statusBarHeight * 2;
		// #endif

	}
	// 设置样式
	const setStyle = () => {
		backgroundStypeRef.value = ['background:' + props.background].join(";")
		textStypeRef.value = ['color:' + props.color, 'font-size:' + props.fontSize + 'rpx'].join(";")
		iconStypeRef.value = ['width:' + props.iconWidth + 'rpx', 'height:' + props.iconHeight + 'rpx'].join(";")
	}
	const backOrHome = () => {
		if (currentPagesRef.value > 1) {
			uni.navigateBack()
		} else {
			uni.switchTab({
				url: "/pages/index/index"
			})
		}
	}
	const gotoAreaPage = () => {
		uni.navigateTo({
			url: "/pages/area/index"
		})
	}
	const gotoSearchPage = () => {
		uni.navigateTo({
			url: "/pages/search/search"
		})
	}
</script>

<style>
	.nav {
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		z-index: 2;
	}

	.back-icon {
		display: flex;
		align-items: center;
		width: 64rpx;
		height: 100%;
		margin-left: 20rpx;
	}

	.back-icon image {
		width: 64rpx;
		height: 64rpx;
	}

	.navbar {
		position: relative;
	}

	.nav-title {
		position: absolute;
		top: 0;
		left: 50%;
		transform: translate(-50%);
	}

	.headNav {
		display: flex;
	}

	.city {
		display: inline-block;
		position: relative;
		font-size: 30rpx;
		font-weight: bold;
		padding-left: 55rpx;
		background: url() no-repeat left center;
		background-size: 40rpx;
	}

	.city:after {
		content: ' ';
		display: inline-block;
		height: 6px;
		width: 6px;
		border-width: 1px 1px 0 0;
		border-color: #353535;
		border-style: solid;
		-webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
		transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
		position: relative;
		top: -2px;
		position: absolute;
		top: 50%;
		margin-top: -4px;
		right: -10px;
	}

	.search-text {
		display: inline-block;
		padding-left: 30rpx;
		color: #bbbbbb;
		font-size: 26rpx;
		background: url() no-repeat left center;
		background-size: 23rpx;
	}
</style>